<template>
  <el-dialog
    class="custom-dialog"
    v-model="dialogVisible"
    title="报警详情"
    width="730px"
    @close="handleClose"
  >
    <div class="custom-detail">
      <el-row :gutter="20">
        <el-col :span="12">
          <span class="label">服务名称:</span>
          <span class="value">{{ detail.name }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">设备位置:</span>
          <span class="value">{{ detail.address }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">设备状态:</span>
          <span class="value">
            <el-tag v-if="detail.status === 1" type="success">在线</el-tag>
            <el-tag v-else type="info">离线</el-tag>
          </span>
        </el-col>
        <el-col :span="12">
          <span class="label">报警状态:</span>
          <span class="value">{{ detail.warning }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">报警等级:</span>
          <span class="value">{{ detail.level }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">报警类型:</span>
          <span class="value">{{ detail.type }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">报警开始时间:</span>
          <span class="value">{{ detail.startTime }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">处理状态:</span>
          <span class="value">
            <span v-if="detail.status === 0">未处理</span>
            <span v-else-if="detail.status === 1">处理中</span>
            <span v-else-if="detail.status === 2">已处理</span>
          </span>
        </el-col>
      </el-row>
      <div class="detail-title">处理</div>
      <el-row :gutter="20">
        <el-col :span="12">
          <span class="label">报警原因说明:</span>
          <span class="value">{{ detail.remark }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">处理结果:</span>
          <span class="value">{{ detail.result }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">处理时间:</span>
          <span class="value">
            {{ detail.time }}
          </span>
        </el-col>
        <el-col :span="12">
          <span class="label">处理人员:</span>
          <span class="value">
            {{ detail.user }}
          </span>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
  },
})
const emit = defineEmits(['close'])
const dialogVisible = ref(false)
const handleClose = () => {
  dialogVisible.value = false
  emit('close')
}
defineExpose({ dialogVisible })
</script>
<style lang="scss" scoped>
.detail-title {
  width: 100%;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: #000000;
  margin-bottom: 20px;
  position: relative;
  box-sizing: border-box;
  padding-left: 10px;
  &::after {
    position: absolute;
    content: ' ';
    width: 5px;
    height: 20px;
    background-color: #4677ee;
    border-radius: 2px;
    left: 0;
    top: 0;
  }
}
</style>
